<template>
	<view class="sliderBottom">
		<uni-transition :mode-class="['slide-top']" :styles="transClass" :show="isShow">
       <view class="mask u-f"  @click="onTap">
       <view class="cells u-f">
         <text class="cell" :class="{'active':(current+1)===item}" v-for="(item,index) in total" :key="index" @click="returnNumber(index)">{{item}}</text>
       </view>
       </view>
    </uni-transition>
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-ui/uni-transition/uni-transition.vue'
	export default {
	  components: {
	  	'uni-transition':uniTransition
	  },
	  props:{
	    show:{
	      type:Boolean,
	      default:false
	    },
      total:Number,
      current:Number
	  },
	  watch:{
	    show:{
	      handler(newVal) {
	      this.isShow=newVal
	      },
	    }
	  },
		data() {
			return {
				isShow:false,
				transClass: {
					'position': 'fixed',
          top: 0,
          bottom: 0,
					'left': 0,
					'right': 0
				},
			};
		},
    methods: {
      onTap() {
        this.isShow=false
        this.$emit('update:show',false)
      },
      returnNumber(num){
        this.$emit('update:current',num)
      }
    }
	}
</script>

<style lang="scss">
  .sliderBottom {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .mask {
     position: absolute;
     right: 0;
     bottom: px2vw(130);
     top: 0;
     left: 0;
      background: rgba($color: #000000, $alpha: 0.5);
      align-items: flex-end;
    }
    .cells {
      width: 100vw;
      background-color: #ffffff;
      font-size: px2vw(24);
      flex-wrap: wrap;
      .cell{
        width: px2vw(64);
        height:px2vw(64);
        border-radius: 8px;
        border: 1px solid #3D9FEA;
        color: #3D9FEA;
        text-align: center;
        line-height: px2vw(64);
        margin: px2vw(30);
      }
      .active{
        background: #3D9FEA;
        color: #ffffff;
      }
      }
    }
</style>
